<template>
  <div class="page-container-padding">
    <div>
      <span>日期:</span>
      <span>
        <el-date-picker
          v-model="queryDate"
          :clearable="false"
          placeholder="查询日期"
          size="mini"
          style="width: 130px; margin-left: 5px"
        ></el-date-picker>
      </span>
      <span style="margin-left: 5px">
        <el-button
          type="primary"
          size="mini"
          :loading="queryLoading"
          @click="toQuerySpotBasic"
        >
          查询
        </el-button>
      </span>
      <span style="margin-left: 5px">
        <el-button
          type="infor"
          size="mini"
          :loading="exportLoading"
          :disabled="spotBasicData.length <= 0"
          @click="toExportExcel"
        >
          导出Excel
        </el-button>
      </span>
      <span style="margin-left: 5px">
        <el-button
          type="success"
          size="mini"
          :loading="copyImageLoading"
          @click="toCopyTableImg"
        >
          复制图片
        </el-button>
      </span>
    </div>
    <div class="basic-box">
      <div class="basic-image">
        <div id="basicImg">
          <div class="bg-bar"></div>
          <div class="title">
            <el-image
              style="width: 90px; height: 90px"
              :src="qrcode"
              fit="fill"
            ></el-image>
            <div class="header">
              <div class="table-name">期货品种主力基差表</div>
              <div class="table-tip">
                <span>来源：瑞达期货研究院</span>
                <span style="padding-left: 20px">时间：{{ basicDate }}</span>
              </div>
            </div>
          </div>
          <div class="table-content">
            <div class="tb-header">
              <div class="col">品种</div>
              <div class="col">现货</div>
              <div class="col">现货涨跌</div>
              <div class="col">基差</div>
              <div class="col">基差率</div>
            </div>
            <div v-for="row in spotBasicData" :key="row.id" class="row-item">
              <div class="value">{{ row.variety_name }}</div>
              <div class="value">{{ row.price }}</div>
              <div class="value">{{ row.price_diff }}</div>
              <div class="value">{{ row.basic_value }}</div>
              <div class="value">{{ (row.basic_rate * 100).toFixed(2) }}%</div>
            </div>
          </div>
          <div class="msg-tip">
            说明：以上数据来源第三方,仅供参考,不作为入市依据！(基差率=基差/期货价格)
          </div>
        </div>
      </div>
      <el-table border stripe :data="spotBasicData">
        <el-table-column
          v-for="c in spotTableColumns"
          :key="c.prop"
          :prop="c.prop"
          :label="c.label"
          :width="c.width" 
          :align="c.align"
        ></el-table-column>
        <el-table-column
          prop="baisc_rate"
          label="基差率"
          width="80px"
          align="right"
        >
          <template slot-scope="scope">
            {{ (scope.row.basic_rate * 100).toFixed(2) }}%
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import QrCodeImage from '@/assets/qr_logo/yjyqrcode2.jpg'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import {
    getSpotBasicTable,
    exportSpotBasicTable,
  } from '@/api/analysisData/spot'
  export default {
    data() {
      return {
        queryDate: new Date(),
        queryLoading: false,
        spotBasicData: [],
        spotTableColumns: [
          {prop: 'basic_date', label: '日期', width: '100px', align:'left', isShow: true},
          {prop: 'variety_name', label: '品种', width: '80px', align:'left', isShow: true},
          {prop: 'contract', label: '主力合约', width: '80px',align:'right', isShow: true},
          {prop: 'close_price', label: '收盘价', width: '100px',align:'right', isShow: true},
          {prop: 'close_price_diff', label: '收盘价涨跌', width: '100px',align:'right', isShow: true},
          {prop: 'price', label: '现货价', width: '100px',align:'right', isShow: true},
          {prop: 'price_diff', label: '现货涨跌', width: '80px',align:'right', isShow: true},
          {prop: 'basic_value', label: '基差', width: '80px',align:'right', isShow: true},
          {prop: 'basic_diff', label: '基差涨跌', width: '100px',align:'right', isShow: true},
        ],
        exportLoading: false,
        qrcode: QrCodeImage,
        basicDate: '2023年06月06日',
        copyImageLoading: false,
      }
    },
    mounted() {
      let today = new Date()
      if (today.getHours() < 15 && today.getMinutes() < 30) {
        this.queryDate = new Date(today.getTime() - 24 * 60 * 60 * 1000)
      } else {
        this.queryDate = today
      }
      // console.log(this.queryDate);
      this.getBasicData()
    },
    methods: {
      getBasicData() {
        const params = {
          date: datetimeToStr(this.queryDate, true, '')
        }
        getSpotBasicTable(params).then((res) => {
          this.spotBasicData = res.data
          const y = this.queryDate.getFullYear()
          const m = (this.queryDate.getMonth() + 1 + '').padStart(2, '0')
          const d = (this.queryDate.getDate() + '').padStart(2, '0')
          this.basicDate = `${y}年${m}月${d}日`
          
        })
      },

      // 查询
      toQuerySpotBasic(){
        this.getBasicData()
      },

      // 导出
      toExportExcel(){
        this.exportLoading = true
        exportSpotBasicTable(this.spotBasicData).then(res => {
          let a = document.createElement("a");
          a.href = res.data.file_url;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click()
          document.body.removeChild(a);
          this.exportLoading = false
        })
      },
      // 复制对象
      toCopyTableImg() {
        this.copyImageLoading = true
        let table = document.getElementById('basicImg')
        html2canvas(table, { backgroundColor: '#ffffff', dpi: 1 }).then(
          (canvas) => {
            // console.log(canvas);
            // 将canvas转为blob对象
            canvas.toBlob((blob) => {
              // 将blob对象放入剪切板item中
              // eslint-disable-next-line no-undef
              const data = [new ClipboardItem({ [blob.type]: blob })]
              // 写入剪切板,成功会执行resolve,失败则走reject
              navigator.clipboard.write(data).then(
                () => {
                  this.$message({
                    message: '截图已保存到粘贴板',
                    type: 'success',
                    duration: 2000,
                  })
                  this.copyImageLoading = false
                },
                () => {
                  this.$message({
                    message: '保存截图失败',
                    type: 'warning',
                    duration: 2000,
                  })
                  this.copyImageLoading = false
                }
              )
            }, 'image/png')
          }
        )
      },
    },
  }
</script>

<style scoped lang="scss">
  .basic-box {
    margin-top: 10px;
    display: flex;
    align-items: top;
    color: #000;
  }
  .basic-image {
    width: 500px;
    margin-left: 20px;
    #basicImg {
      width: 441px;
    }
    .bg-bar {
      height: 18px;
      background-color: #2f75b5;
    }
    .title {
      height: 90px;
      padding: 2px 6px;
      display: flex;
      align-items: center;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      .header {
        width: 300px;
      }
      .table-name {
        font-size: 22px;
        line-height: 40px;
        color: #2f75b5;
        text-align: center;
      }
      .table-tip {
        line-height: 40px;
        margin-bottom: 0px;
        text-align: center;
        font-size: 12px;
      }
    }
    .table-content {
      .tb-header {
        display: flex;
        align-items: center;
        background-color: #2f75b5;
        color: #fff;
        font-weight: 600;
        line-height: 18px;
        .col {
          width: 100px;
          text-align: center;
          border-bottom: 1px solid #eee;
          border-right: 1px solid #eee;
          padding: 1px 2px;
        }
      }
      .row-item {
        display: flex;
        align-items: center;
        .value {
          width: 100px;
          border-bottom: 1px solid #eee;
          border-right: 1px solid #eee;
          padding: 1px 2px;
          text-align: right;
        }
        .value:first-child {
          color: #1d62a3;
          font-weight: 600;
          text-align: left;
          border-left: 1px solid #eee;
        }
      }
    }
    .msg-tip {
      line-height: 19px;
      color: #f43131;
      font-size: 9px;
      // -webkit-transform: scale(0.8);
      // transform-origin: 0 0;
      // zoom: .7;
    }
  }
</style>
